<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">平台ID</label>
              <div class="layui-input-inline">
                <input type="text" name="userId" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">员工姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="realName" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">员工身份</label>
              <div class="layui-input-inline">
                <select name="identity" lay-filter="identity">
                  <option value="">不限</option>
                  <option value="0">管理员</option>
                  <option value="1">推广员</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="add">新增员工</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除员工</button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

  </div>
</div>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

    table.render({
      elem: '#currentTableId',
      url: '/user/list',
      method: 'POST',
      contentType: 'application/json',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox"},
        {
          field: 'numbering', title: '序号', width: 60, align: 'center', templet: function (d) {
            return d.LAY_INDEX; //返回序号
          }
        },
        {field: 'userId', title: '平台ID', sort: true, align: 'center'},
        {field: 'realName', title: '员工姓名', sort: true, align: 'center'},
        // {field: 'identity', title: '员工身份', sort: true, align: 'center'},
        {
          field: 'identity', title: '员工身份', sort: true, align: 'center', templet: function (d) {
            if (d.identity === '0') {
              return '管理员'
            } else if (d.identity === '1') {
              return '推广员'
            } else {
              return d.identity
            }
          }
        },
        {
          field: 'quickPay', title: '快捷支付', sort: true, align: 'center', templet: function (d) {
            if (d.quickPay == 1) {
              return '<div style="color: #00ba00">是<div/>'
            } else {
              return '<div style="color: red">否<div/>'
            }
          }
        },
        {
          field: 'status', title: '登录权限', sort: true, align: 'center', templet: function (d) {
            if (d.status == 0) {
              return '<div style="color: #00ba00">是<div/>'
            } else {
              return '<div style="color: red">否<div/>'
            }
          }
        },
        {field: 'createTime', title: '创建时间', sort: true, align: 'center'},
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 50,
      page: true,
      request: {
        pageName: 'pageNum',
        limitName: 'pageSize'
      },
      response: { //定义后端 json 格式，详细参见官方文档
        statusName: 'code', //状态字段名称
        statusCode: '200', //状态字段成功值
        msgName: 'msg', //消息字段
        countName: 'total', //总数字段
        dataName: 'rows' //数据字段
      },
    });

    // 监听表格双击事件
    table.on('rowDouble(currentTableFilter)', function (obj) {
      // console.log("obj=", obj)
      var data = obj.data;
      var index = layer.open({
        title: '员工管理详情',
        type: 2,
        shade: 0.2,
        maxmin: true,
        shadeClose: true,
        area: ['100%', '100%'],
        content: './edit.html?action=edit&userId=' + data.userId,
        end: function () {
          //关闭弹框后触发
          reloadTable();
        }
      });
      $(window).on("resize", function () {
        layer.full(index);
      });
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: data.field
      }, 'data');

      return false;
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        layer.prompt({
          formType: 0,
          title: '请填写员工ID',
          btn: ['确定', '取消'],
          area: ['200px', '20px']
        }, function (val, index) {
          if (isNotNull(val)) {
            layer.close(index);
            layer.open({
              title: '员工管理详情',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: './edit.html?action=add&userId=' + val,
              end: function () {
                layer.close(index);
                //关闭弹框后触发
                reloadTable()
              }
            });
          } else {
            layer.close(index);
            layer.msg("员工ID不能为空噢");
          }
        });
      } else if (obj.event === 'delete') {  // 监听删除操作
        let checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
        if (data.length > 0) {
          layer.confirm('确定删除吗', function (index) {
            let userIdList = []
            for (const i in data) {
              userIdList.push(data[i].userId);
            }
            $.ajax({
              type: "post",
              url: '/user/delete/staff',
              data: JSON.stringify(userIdList),
              dataType: 'json',
              contentType: 'application/json',
              success: function (req) {
                if (req.code == 200) {
                  layer.msg("已删除");
                  reloadTable();
                } else {
                  layer.msg("删除失败");
                }
              },
              error: function (e) {
                layer.msg("删除失败");
              }
            })
            layer.close(index);
          });
        } else {
          layer.alert('请至少选中一行数据');
        }
      }
    });

    // 监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });
  });

  /**
   * 重载表格数据
   */
  function reloadTable() {
    layui.use(['table'], function () {
      let table = layui.table;
      table.reload('currentTableId', {
        url: '/user/list'
      });
    })
  }
</script>

</body>
</html>
